<template>
  <div class="home-box">
    <el-container>
      <el-header>
        <div class="header-left">
          <div>
            <img src="../assets/img/定位.png" class="location" >
            <el-dropdown :popper-append-to-body="false">
              <span class="el-dropdown-link">
                仲恺公安分局<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" :popper-append-to-body="false">
                <el-dropdown-item style="font-size: 8px;">黄金糕</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-input
            placeholder="搜索"
            v-model="input1">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-switch
            v-model="value"
            active-color="#409EFF"
            inactive-color="#ff4949">
          </el-switch>
          <img src="../assets/img/报警.png" class="alert" >
        </div>
        <div class="header-center">
          仲恺公安分局一村（居）一警配置系统
        </div>
        <div class="header-right">
          <div class="time">{{this.dateYear}} {{this.dateDay}}</div>
          <el-dropdown :popper-append-to-body="false">
              <span class="el-dropdown-link">
              admin <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" :popper-append-to-body="false">
                <el-dropdown-item style="font-size: 8px;color: white;" @click.native="dialogTableVisible = true">修改密码</el-dropdown-item>
                <el-dropdown-item style="font-size: 8px;color: white;" @click.native="log">退出登录</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
          <el-dialog
            title="修改密码"
            width="30%"
            @close="close"
            :visible.sync="dialogTableVisible"
            class="pwd">
            <el-form
              :model="pwdFormData"
              :rules="rules"
              ref="pwdForm"
              label-width="70px">
              <el-form-item label="旧密码:" prop="oldPwd">
                <el-input
                  type="password"
                  size="small"
                  v-model="pwdFormData.oldPwd"
                  maxlength="16"
                  spellcheck ="false"
                  clearable
                  show-password/>
              </el-form-item>
              <el-form-item label="新密码:" prop="newPwd">
                <el-input
                  type="password"
                  size="small"
                  v-model="pwdFormData.newPwd"
                  maxlength="16"
                  spellcheck ="false"
                  clearable
                  show-password/>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="info" size="small" @click="resetForm('pwdFormData')" >取 消</el-button>
                <el-button type="primary" size="small" @click="submitForm('pwdFormData')">确 定</el-button>
              </span>
            </template>
          </el-dialog>
          <div class="change-language">
            <el-dropdown :popper-append-to-body="false">
              <span class="el-dropdown-link">
                简体中文<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" :popper-append-to-body="false">
                <el-dropdown-item style="font-size: 8px;">中文</el-dropdown-item>
                <el-dropdown-item style="font-size: 8px;">英文</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
          </div>
          <div class="change-page">配置系统</div>
        </div>
      </el-header>
      <el-container class="include-container">
        <el-aside>
            <el-col :span="12">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                router>
                <el-menu-item index="HomePage">
                  <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="DeviceManage">
                  <span slot="title">设备管理</span>
                </el-menu-item>
                <el-submenu index="8">
                  <template slot="title">
                    <span>系统设置</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="ElectricFence">电子围栏</el-menu-item>
                    <el-menu-item index="SystemManage">系统设置</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="History">
                  <span slot="title">历史资料</span>
                </el-menu-item>
              </el-menu>
            </el-col>
        </el-aside>
        <el-main>
          <div class="main-container">
            <router-view/>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { logout, changePwd } from '../api/login.js'
// import router from 'vue-router'
export default {
  name: 'Home',
  data () {
    return {
      input1: '',
      value: true,
      dateDay: null,
      dateYear: null,
      timer: null,
      options: [{
        value: '选项1',
        label: '中文'
      }, {
        value: '选项2',
        label: '英文'
      }],
      value1: '',
      dialogTableVisible: false,
      pwdFormData: {
        oldPwd: '',
        newPwd: ''
      },
      rules: {
        oldPwd: [{
          required: true,
          pattern: /(?!^\d+$)(?!^[A-Za-z]+$)(?!^[^A-Za-z0-9]+$)(?!^.*[\u4E00-\u9FA5].*$)^\S{8,16}$/,
          message: '长度8-16位，大小写字母、数字、特殊符号至少包含两种',
          trigger: blur
        }],
        newPwd: [{
          required: true,
          pattern: /(?!^\d+$)(?!^[A-Za-z]+$)(?!^[^A-Za-z0-9]+$)(?!^.*[\u4E00-\u9FA5].*$)^\S{8,16}$/,
          message: '长度8-16位，大小写字母、数字、特殊符号至少包含两种',
          trigger: blur
        }]
      }
    }
  },
  mounted () {
    this.timer = setInterval(() => {
      const date = this.$dayjs(new Date())
      this.dateDay = date.format('HH:mm:ss')
      this.dateYear = date.format('YYYY/MM/DD')
    }, 500)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    log () {
      logout().then((res) => {
        console.log('退出登录')
        console.log(res.data)
        sessionStorage.removeItem('Authorization')
        this.$router.push('Login')
      }).catch((error) => {
        console.log(error)
      })
    },
    submitForm (pwdFormData) {
      this.$refs.pwdForm.validate((valid) => {
        if (valid) {
          alert('submit!')
          const account = sessionStorage.getItem('account')
          console.log(account)
          changePwd({
            account,
            oldPwd: this.pwdFormData.oldPwd,
            newPwd: this.pwdFormData.newPwd
          }).then((res) => {
            console.log('调用接口成功')
            console.log(res.data)
            alert('调用接口成功')
            // router.push('/login')
          }).catch((error) => {
            console.log(error)
            alert('修改密码失败')
          })
        } else {
          console.log('提交格式错误')
          return false
        }
      })
    },
    resetForm (pwdFormData) {
      this.$refs[pwdFormData].resetFields()
    },
    close (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style scoped>
.home-box{
  background-image: url(../assets/img/背景.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}
.el-header{
  background: url(../assets/img/头部背景.png);
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left{
  width: 300px;
  margin: 10px 0px 0px 10px;
  display: flex;
  justify-content: space-between;
}
.el-dropdown{
  font-size: 8px;
}
.el-dropdown-link {
  line-height: 25px;
  cursor: pointer;
  color: rgb(55, 165, 240);
}
.el-dropdown-menu{
  padding: 0;
  border: 1px solid #0473eb;
  background-color: #04367a;
}
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
  background-color: #0d4d8d;
}
.el-icon-arrow-down {
  font-size: 8px;
}
.el-dropdown-menu .el-dropdown-item{
  font-size: 8px;
}
.location{
  width: 18px;
  height: 20px;
  margin-right: 6px;
  line-height: 19px;
  margin-bottom: -6px;
}
.alert{
  width: 23px;
  height: 23px;
  margin-left: -10px;
}
/* 搜索框样式 */
.header-left >>> .el-input__inner{
  background-color: #111f3a;
  width: 80px;
  border: 1px solid rgb(55, 165, 240);
  border-radius: 15px 15px 15px 15px;
  height: 25px;
  font-size: 6px;
  color: rgb(55, 165, 240);
}
.header-left >>> .el-input__icon{
  line-height: 15px;
  height: 30px;
  color: rgb(55, 165, 240);
}
.header-left >>> .el-input{
  width: 80px;
}
.header-left >>> .el-input__inner::-webkit-input-placeholder {
  color: rgb(55, 165, 240);
  padding-left: 10px;
  font-size: 10px;
}
.header-left >>> .el-switch__core{
  margin-bottom: -4px;
  width: 35px!important;
}
.header-center{
  font-size: 23px;
  font-weight: 700;
  margin-top: -10px;
  margin-left: -100px;
  background-image: linear-gradient(0deg, rgb(255, 255, 255), rgb(165, 240, 255));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-reflect: below -2px linear-gradient(transparent, transparent 40%, rgba(165, 240, 255, 0.14))
}
.time{
  margin-top: 5px;
  margin-left: -120px;
  color: #E9EEF3;
  font-style: normal;
  font-size: 10px;
}
.header-right{
  width: 200px;
  margin: 10px 0px 10px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.change-page{
  font-size: 8px;
  color: rgb(55, 165, 240);
  line-height: 25px;
}
/* 中部容器 */
.include-container{
  height: 86%;
  width: 100%;
  background-image: url(../assets/img/中部背景.png);
  background-size: 100% 100%;
  background-clip: padding-box;
  margin-top: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
}
/* 导航菜单 */
.el-aside{
  width: 220px!important;
  height: 100%;
  line-height: 10px;
  position: relative;
  overflow: auto;
}
/* 滚动条隐藏 */
.el-aside::-webkit-scrollbar{
  display: none;
}
/* 普通导航 */
li.el-menu-item{
  background-image: url(../assets/img/二级列表按钮-默认.png);
  color: rgb(55, 165, 240);
  background-size: 100% 100%;
  width: 200px;
}
.el-menu-vertical-demo.el-menu >>> .el-submenu__title:hover{
  background:transparent;
  background-size: 100% 100%;
  width: 200px;
  background-image: url(../assets/img/一级列表按钮-点击.png);
}
/* 带下拉菜单的导航 */
.el-menu-vertical-demo.el-menu >>> .el-submenu__title{
  width: 200px;
}
.el-menu >>> .el-submenu__title{
  background-image: url(../assets/img/一级列表按钮-默认.png);
  background-size: 100% 100%;
  color: rgb(55, 165, 240);
}
.el-menu-item-group >>> .el-menu-item-group__title{
  padding: 0;
  background:transparent;
}
.el-menu-item-group >>> .el-menu-item{
  background-size: 100% 100%;
  background-image: url(../assets/img/二级列表按钮-默认.png);
  width: 170px;
}
.el-submenu >>> .el-menu-item{
  min-width: 170px;
}
.el-menu-item-group{
  padding-left: 30px;
  padding-right: 20px;
  margin-right: 30px;
}
.el-menu.el-menu--inline{
  background:transparent;
}
.el-submenu >>> .el-menu.el-menu--inline{
  background:transparent;
  background-size: 100% 100%;
}
.el-submenu >>> .el-icon-arrow-down::before{
  content: none !important;
}
.el-submenu >>> .el-menu.el-menu--inline:hover{
  background:transparent;
  background-size: 100% 100%;
}
li.el-menu-item.el-submenu__title, .el-menu-item:hover{
  background-image: url(../assets/img/一级列表按钮-点击.png)!important;
  background-size: 100% 100% !important;
  background:transparent;
}
.el-menu{
  background: transparent;
  border-right: 0;
  text-align: center;
}
.el-menu .el-menu{
   background: transparent;
}
.el-col-12{
  width: 200px;
  line-height: 10px;
  position: absolute;
}
.el-main{
  background-image: url(../assets/img/底框1.png);
  background-size: 100% 100% !important;
  width: 81%;
  height: 100%;
  margin-top: -10px;
  left: 230px;
}
.el-main::-webkit-scrollbar{
  display: none;
}
.main-container{
  position: relative;
}
.pwd >>> .el-form-item__label{
  color: black;
}
</style>
